import * as echarts from '../ec-canvas/echarts'

Component({
  properties: {
    chartId: {
      type: String,
      value: 'chart-group-radar'
    },
    canvasId: {
      type: String,
      value: 'canvas-group-radar'
    },
    chartData: {
      type: Array,
      value: []
    },
    chartInfo:{
      type: Object,
      value: () => ({})
    }

  },
  data: {
    ec: {
      lazyLoad: true,
    }
  },
  lifetimes: {
    attached() {
      this.chartComp = this.selectComponent('#chart-group-radar')
    }
  },

  methods: {
    initChart(options) {
      this.chartComp && this.chartComp.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        })
        // configChart(chart)
        chart.setOption(options)
        this.chart = chart
        return chart
      })
    }
  },

  observers: {
    'chartData': function (valList) {
      const opts = {
        radar: {
          radius: '60%',
          indicator: [
            { name: "电池健康度", max: 100, tag: "socHealth" },
            { name: "BMS精度", max: 100, tag: "bms" },
            { name: "异常告警", max: 100, tag: "errorWarning" },
            { name: "温度一致性", max: 100, tag: "tempConsist" },
            { name: "电压一致性", max: 100, tag: "valConsist" },
            { name: "SOC一致性", max: 100, tag: "socConsist" },
          ],
          axisName: {
            show: true,
            formatter: (value, indicator) => {
              let val = 0;
              if (indicator.tag == "socHealth") {
                val = this.properties.chartInfo.sohValue || 0;
              } else if (indicator.tag == "bms") {
                val = this.properties.chartInfo.bmsAccuracy || 0;
              } else if (indicator.tag == "errorWarning") {
                val = this.properties.chartInfo.alarmScore || 0;
              } else if (indicator.tag == "tempConsist") {
                val = this.properties.chartInfo.uniformityTmp || 0;
              } else if (indicator.tag == "valConsist") {
                val = this.properties.chartInfo.uniformityV || 0;
              } else if (indicator.tag == "socConsist") {
                val = this.properties.chartInfo.socAccuracy || 0;
              }
              return value + "\n" + `(${val})`;
            },
            color: "#B4BFDC",
            fontSize: "10",
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: "transparent",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: ["#464856"],
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 1,
              color: "#464856",
            },
          },
        },
        series: [
          {
            name: "电池得分",
            type: "radar",
            data: [
              {
                value: valList,
                name: "电池得分",
                itemStyle: {
                  normal: {
                    color: "#00DCFF",
                  },
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.RadialGradient(
                      0.5,
                      0.5,
                      0.5,
                      [
                        { offset: 0, color: "rgba(85, 0, 255, 0.1)" },
                        { offset: 1, color: "rgba(0, 187, 255, 0.45)" },
                      ],
                      false
                    ),
                  },
                },
              },
            ],
            lineStyle: {
              color: "#00DCFF",
            },
          },
        ],
      }
      if (this.chart) {
        this.chart.setOption(opts)
      } else {
        this.initChart(opts)
      }
    }
  }
})
